<template>
  <el-card>
    <my-bread level1="商品管理" level2="商品分类"></my-bread>
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-button @click.prevent="showAddGoodsDialog()" type="success">添加商品</el-button>
      </el-col>
    </el-row>

    <el-table :data="categoryList" style="width: 100%">
      <el-table-column type="index" prop="cat_id" label="id" width="60">
      </el-table-column>
     <!-- <el-table-column prop="cat_name" label="分类名称" width="180">
      </el-table-column> -->
      <el-tree-grid prop="cat_name" label="分类名称" treeKey="cat_id" parentKey="cat_pid"  levelKey ="cat_level" childKey ="children">

      </el-tree-grid>
      <el-table-column label="创建日期">
        <template slot-scope="categoryList">
          {{categoryList.row.add_time|fmtDate}}
        </template>
      </el-table-column>
      <el-table-column prop="cat_level" label="分类级别">
        <template slot-scope="categoryList">
          <span v-if="categoryList.row.cat_level === 0">一级</span>
          <span v-else-if="categoryList.row.cat_level === 1">二级</span>
          <span v-else-if="categoryList.row.cat_level === 2">三级</span>
        </template>
      </el-table-column>
      <el-table-column prop="cat_deleted" label="是否有效">
        <template slot-scope="categoryList">
          <span v-if="categoryList.row.cat_deleted === false">有效</span>
          <span v-else-if="categoryList.row.cat_deleted === true">无效</span>

        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="操作">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary"  icon="el-icon-edit"></el-button>
          <el-button plain size="mini"  icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
      :page-sizes="[4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


    <el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="分类名称" label-width="100px">
          <el-input v-model="form.cat_name" autocomplete="true"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-cascader expand-trigger="hover" :show-all-levels="false" :options="options"
            :props="defaultProps" v-model="selectOptions"></el-cascader>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd=false">取 消</el-button>
        <el-button type="primary" @click.prevent="addCategory()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  var ElTreeGrid = require('element-tree-grid');
  export default {
    components: {
      ElTreeGrid
    },
    data() {
      return {
        dialogFormVisibleAdd: false,
        selectOptions: [],
        defaultProps: {
          label: 'cat_name',
          value: 'cat_id',
          children: 'children'

        },
        pagenum: 1,
        pagesize: 4,
        total: -1,
        form: {},
        options: [],
        categoryList: []
      }
    },
    created() {
      this.queryCateList()
    },
    methods: {
      async queryCateList() {
        const res = await this.$http.get('categories?type=3',{
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }})
        this.categoryList = res.data.data.result
        console.log(this.categoryList)
        this.total = res.data.data.total

      },
      showAddGoodsDialog() {
        this.dialogFormVisibleAdd = true
        this.queryGoodCategory()
      },
      addCategory() {

      },
      async queryGoodCategory() {
        const res = await this.$http.get('categories?type=2')
        this.options = res.data.data
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.handleCurrentChange(1)
        // this.queryUserList()
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.queryCateList()
      }
    }
  }
</script>

<style>
</style>
